<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width; initial-scale=1.0;
  maximum-scale = 1.0; user-scalable=0;">
<meta name="apple-touch-fullscreen" content="YES" />
<title>HTML 5 Report</title>
<script type ="text/javascript">
 function init(){
	var data = [{year:"2007",sales:49},
	            {year:"2008",sales:131},
	            {year:"2009",sales:294},
	            {year:"2010",sales:405}];
	var report ={x:"year",y:"sales",values:data};
	
	graph(report,300,350);
 }	            
 
 function graph(report,maxWidth,maxHeight){
	 var data = report.values;
	 var canvas = document.getElementById("graph");
	 var axisBuffer = 20;
	 canvas.height= maxHeight +100;
	 canvas.width= maxWidth;
	 var ctx = canvas.getContext("2d");
	 
	 var width=50;
	 var buffer=20;
	 var i =0;
	 var x = buffer +axisBuffer;
	 
	 ctx.font="bold 12px sans-serif";
	 ctx.textAlign = "start";
	 for(i=0;i<data.length;i++){
		 ctx.fillStyle = "rdba(0,0,200,1)";
		 ctx.fillRect(x,maxHeight -(data[i][report.y]/2),
		 width,(data[i][report.y]/2));
		 
		 ctx.fillStyle="rgba(0,0,0,0.9)";
		 ctx.fillText(data[i][report.x],x+(width/4),
				 maxHeight +15);
		 
		 x += width + buffer;
		 
	 }
	 
	 ctx.moveTo(axisBuffer,maxHeight);
	 ctx.lineTo(axisBuffer+maxWidth,maxHeight);
	 ctx.stroke();
	 
	 ctx.moveTo(axisBuffer,0);
	 ctx.lineTo(axisBuffer,maxHeight);
	 ctx.stroke();
	 
	 var lineSpacing = 50;
	 var numLines = maxHeight/lineSpacing;
	 var y= lineSpacing;
	 ctx.font = "10px sans-serif";
	 ctx.textBaseline= "middle";
	 
	 for(i=0;i<numLines;i++){
		 ctx.strokeeStyle = "rgba(0,0,0,0.25)";
		 ctx.moveTo(axisBuffer,y);
		 ctx.lineTo(axisBuffer + maxWidth,y);
		 ctx.stroke();
		 ctx.fillStyle ="rgba(0,0,0,0.74)";
		 ctx.fillText(""+2*(maxHeight-y),0,y);
		 y+=lineSpacing;
		 
	 }
 }
 
</script>
</head>
<body onload="init()">
	<canvas id="graph" ></canvas>
</body>
</html>